@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '../styles.module';

$sizes: 's', 'm';

$icon-sizes: (
  's': $icon-xs,
  'm': $icon-s,
);

.container {
  @include container('checkbox');
}

.box {
  box-sizing: border-box;
  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
  border-style: solid; // это наверное должно быть в композитном токене box

  &[data-checked=false] {
    &[data-focusvisible=true],
    &[data-hover=true] {
      background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
    }
    &[data-disabled=true] {
      background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
    }
  }

  &[data-indeterminate=true],
  &[data-checked=true] {
    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
    border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
    &[data-focusvisible=true],
    &[data-hover=true] {
      background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
      border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
    }
    &[data-disabled=true] {
      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
    }
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($toggles, $size, 'checkbox', 'box');

      svg {
        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

.icon {
  position: absolute;
  top: 0;
  left: 0;

  display: none;

  width: 100%;
  height: 100%;

  color: simple-var($theme-variables, 'sys', 'primary', 'on-accent');

  &[data-indeterminate=true],
  &[data-checked=true] {
    display: block;
  }
}
